<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube 视频下载器</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-content">
                <div class="header-left">
                    <h1><i class="fab fa-youtube"></i> YouTube 视频下载器</h1>
                    <p>使用 yt-dlp 下载 YouTube 视频和播放列表</p>
                </div>
                <div class="header-right">
                    <button class="restart-btn" id="restartBtn" title="重启服务">
                        <i class="fas fa-redo"></i>
                    </button>
                    <button class="settings-btn" id="settingsBtn" title="设置">
                        <i class="fas fa-cog"></i>
                    </button>
                </div>
            </div>
            
            <!-- YouTube连接检查 -->
            <div class="connection-status" id="connectionStatus">
                <div class="status-indicator" id="statusIndicator">
                    <i class="fas fa-spinner fa-spin"></i>
                    <span id="statusText">正在检查YouTube连接<span class="dots">...</span></span>
                </div>
            </div>
        </div>    
            <!-- 应用模式切换 -->
            <div class="app-mode-selector">
                <label class="mode-option">
                    <input type="radio" name="appMode" value="download" checked>
                    <span class="mode-label">
                        <i class="fas fa-download"></i> 下载模式
                    </span>
                </label>
                <label class="mode-option">
                    <input type="radio" name="appMode" value="processing">
                    <span class="mode-label">
                        <i class="fas fa-magic"></i> 视频处理
                    </span>
                </label>
                <label class="mode-option">
                    <input type="radio" name="appMode" value="filemanagement">
                    <span class="mode-label">
                        <i class="fas fa-folder-open"></i> 文件管理
                    </span>
                </label>
            </div>
        </header>

        <div class="status-bar" id="statusBar">
            <div class="status-item">
                <span id="ytdlpStatus">检查中...</span>
            </div>
        </div>

        <main class="main-content">
            <div class="download-section">
                <!-- 下载模式选择 -->
                <div class="mode-selector">
                    <label class="mode-option">
                        <input type="radio" name="downloadMode" value="single" checked>
                        <span class="mode-label">
                            <i class="fas fa-video"></i> 单个下载
                        </span>
                    </label>
                    <label class="mode-option">
                        <input type="radio" name="downloadMode" value="batch">
                        <span class="mode-label">
                            <i class="fas fa-list"></i> 批量下载
                        </span>
                    </label>
                    <label class="mode-option">
                        <input type="radio" name="downloadMode" value="search">
                        <span class="mode-label">
                            <i class="fas fa-search"></i> 搜索下载
                        </span>
                    </label>
                    <label class="mode-option">
                        <input type="radio" name="downloadMode" value="saved">
                        <span class="mode-label">
                            <i class="fas fa-bookmark"></i> 记录链接
                        </span>
                    </label>
                </div>

                <!-- 单个下载区域 -->
                <div class="single-download" id="singleDownload">
                    <div class="input-group">
                        <label for="videoUrl">
                            <i class="fas fa-link"></i> 视频或播放列表 URL
                        </label>
                        <input 
                            type="url" 
                            id="videoUrl" 
                            placeholder="https://www.youtube.com/watch?v=..."
                            required
                        >
                    </div>
                </div>

                <!-- 批量下载区域 -->
                <div class="batch-download" id="batchDownload" style="display: none;">
                    <div class="input-group">
                        <label for="batchUrls">
                            <i class="fas fa-list"></i> 批量 URL (每行一个)
                        </label>
                        <textarea 
                            id="batchUrls" 
                            placeholder="https://www.youtube.com/watch?v=video1&#10;https://www.youtube.com/watch?v=video2&#10;https://www.youtube.com/watch?v=video3"
                            rows="8"
                        ></textarea>
                        <div class="batch-info">
                            <span id="urlCount">0 个 URL</span>
                            <button type="button" id="validateUrlsBtn" class="btn btn-small">
                                <i class="fas fa-check"></i> 验证 URL
                            </button>
                            <button type="button" id="clearUrlsBtn" class="btn btn-small btn-danger">
                                <i class="fas fa-trash"></i> 清空
                            </button>
                        </div>
                    </div>

                    <div class="batch-options">
                        <div class="input-group">
                            <label for="batchKeyword">
                                <i class="fas fa-folder"></i> 关键字 (可选)
                            </label>
                            <input 
                                type="text" 
                                id="batchKeyword" 
                                placeholder="输入关键字，将创建以此命名的文件夹..."
                                maxlength="50"
                            >
                            <small class="input-hint">
                                <i class="fas fa-info-circle"></i> 
                                如果填写关键字，下载的文件将保存在 "日期/关键字/视频名称/" 目录结构中
                            </small>
                        </div>
                        
                        <label class="checkbox-label">
                            <input type="checkbox" id="batchConcurrent" checked>
                            <span class="checkmark"></span>
                            <i class="fas fa-bolt"></i> 并发下载 (更快但占用更多资源)
                        </label>
                        <div class="concurrent-options" id="concurrentOptions">
                            <label for="maxConcurrent">
                                <i class="fas fa-sliders-h"></i> 最大并发数
                            </label>
                            <select id="maxConcurrent">
                                <option value="2">2</option>
                                <option value="3" selected>3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 搜索下载区域 -->
                <div class="search-download" id="searchDownload" style="display: none;">
                    <div class="input-group">
                        <label for="searchKeyword">
                            <i class="fas fa-search"></i> 搜索关键字
                        </label>
                        <div class="search-input-group">
                            <input 
                                type="text" 
                                id="searchKeyword" 
                                placeholder="输入要搜索的关键字或标签..."
                                required
                            >
                            <button type="button" id="searchBtn" class="btn btn-secondary">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                        </div>
                    </div>

                    <div class="search-options">
                        <div class="option-group">
                            <label for="searchType">
                                <i class="fas fa-filter"></i> 搜索类型
                            </label>
                            <select id="searchType">
                                <option value="keyword">关键字搜索</option>
                                <option value="hashtag">标签搜索 (#)</option>
                            </select>
                        </div>

                        <div class="option-group">
                            <label for="videoType">
                                <i class="fas fa-video"></i> 视频类型
                            </label>
                            <select id="videoType">
                                <option value="all">所有视频</option>
                                <option value="shorts">短视频 (Shorts)</option>
                                <option value="long">长视频</option>
                            </select>
                        </div>

                        <div class="option-group">
                            <label for="maxResults">
                                <i class="fas fa-list-ol"></i> 搜索结果数量
                            </label>
                            <select id="maxResults">
                                <option value="10">10 个结果</option>
                                <option value="20" selected>20 个结果</option>
                                <option value="30">30 个结果</option>
                                <option value="50">50 个结果</option>
                            </select>
                        </div>

                        <div class="option-group">
                            <label for="sortBy">
                                <i class="fas fa-sort"></i> 排序方式
                            </label>
                            <select id="sortBy">
                                <option value="relevance">相关性</option>
                                <option value="upload_date">上传时间</option>
                                <option value="view_count">观看次数</option>
                                <option value="rating">评分</option>
                            </select>
                        </div>

                        <div class="option-group">
                            <label for="searchConcurrent">
                                <i class="fas fa-download"></i> 同时下载数
                            </label>
                            <select id="searchConcurrent">
                                <option value="1">1 个</option>
                                <option value="2" selected>2 个</option>
                                <option value="3">3 个</option>
                                <option value="4">4 个</option>
                                <option value="5">5 个</option>
                            </select>
                        </div>
                    </div>

                    <!-- 搜索结果区域 -->
                    <div class="search-results" id="searchResults" style="display: none;">
                        <div class="search-results-header" id="searchResultsHeader">
                            <h3><i class="fas fa-list"></i> 搜索结果</h3>
                            <div class="selection-controls">
                                <label class="checkbox-label">
                                    <input type="checkbox" id="selectAll">
                                    <span class="checkmark"></span>
                                    全选
                                </label>
                                <span class="selected-count">已选择: <span id="selectedCount">0</span> 个视频</span>
                            </div>
                        </div>
                        <div id="searchResultsList" class="search-results-list"></div>
                        
                        <!-- 翻页控制 -->
                        <div class="pagination-controls" id="paginationControls" style="display: none;">
                            <button id="prevPageBtn" class="btn btn-secondary" disabled>
                                <i class="fas fa-chevron-left"></i> 上一页
                            </button>
                            <span class="page-info">
                                第 <span id="currentPage">1</span> 页，共 <span id="totalPages">1</span> 页
                            </span>
                            <button id="nextPageBtn" class="btn btn-secondary" disabled>
                                下一页 <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 记录链接区域 -->
                <div class="saved-links" id="savedLinks" style="display: none;">
                    <!-- 添加链接区域 -->
                    <div class="add-links-section">
                        <div class="input-group">
                            <label for="linksToSave">
                                <i class="fas fa-plus"></i> 添加视频链接 (每行一个)
                            </label>
                            <textarea 
                                id="linksToSave" 
                                placeholder="https://www.youtube.com/watch?v=video1&#10;https://www.youtube.com/watch?v=video2&#10;https://www.youtube.com/watch?v=video3"
                                rows="6"
                            ></textarea>
                        </div>
                        
                        <div class="tag-input-section">
                            <div class="input-group">
                                <label for="linkTag">
                                    <i class="fas fa-tag"></i> 标签
                                </label>
                                <div class="tag-input-group">
                                    <input 
                                        type="text" 
                                        id="linkTag" 
                                        placeholder="输入标签名称或从下拉列表选择..."
                                        list="existingTags"
                                    >
                                    <datalist id="existingTags">
                                        <!-- 动态填充已有标签 -->
                                    </datalist>
                                    <button type="button" id="saveLinksBtn" class="btn btn-primary">
                                        <i class="fas fa-save"></i> 保存链接
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 显示模式切换 -->
                    <div class="view-mode-selector">
                        <label class="view-mode-option">
                            <input type="radio" name="viewMode" value="list" checked>
                            <span class="view-mode-label">
                                <i class="fas fa-list"></i> 列表视图
                            </span>
                        </label>
                        <label class="view-mode-option">
                            <input type="radio" name="viewMode" value="tags">
                            <span class="view-mode-label">
                                <i class="fas fa-tags"></i> 标签视图
                            </span>
                        </label>
                    </div>

                    <!-- 标签过滤器 (仅在标签视图下显示) -->
                    <div class="tag-filter" id="tagFilter" style="display: none;">
                        <div class="filter-header">
                            <h3><i class="fas fa-filter"></i> 按标签过滤</h3>
                            <button type="button" id="clearTagFilterBtn" class="btn btn-small btn-secondary">
                                <i class="fas fa-times"></i> 清除过滤
                            </button>
                        </div>
                        <div class="tag-list" id="tagList">
                            <!-- 动态填充标签列表 -->
                        </div>
                    </div>

                    <!-- 保存的链接列表 -->
                    <div class="saved-links-list" id="savedLinksList">
                        <!-- 元数据状态显示 -->
                        <div id="metadata-status" class="metadata-status" style="display: none;">
                            <!-- 动态填充状态信息 -->
                        </div>
                        
                        <div class="saved-links-header">
                            <h3><i class="fas fa-bookmark"></i> 保存的链接</h3>
                            <div class="list-controls">
                                <label class="checkbox-label">
                                    <input type="checkbox" id="selectAllSaved">
                                    <span class="checkmark"></span>
                                    全选
                                </label>
                                <span class="selected-count">已选择: <span id="selectedSavedCount">0</span> 个视频</span>
                                <button type="button" id="downloadSelectedSavedBtn" class="btn btn-primary" disabled>
                                    <i class="fas fa-download"></i> 下载选中
                                </button>
                                <button type="button" id="deleteSelectedSavedBtn" class="btn btn-danger" disabled>
                                    <i class="fas fa-trash"></i> 删除选中
                                </button>
                            </div>
                        </div>
                        <div id="savedLinksContainer" class="saved-links-container">
                            <div class="empty-state">
                                <i class="fas fa-bookmark"></i>
                                <p>还没有保存任何链接</p>
                                <p>在上方输入框中添加视频链接并保存</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="options-grid">
                    <!-- 预设别名选择器 (yt-dlp 2025.08.20新功能) -->
                    <div class="option-group">
                        <label for="presetAlias">
                            <i class="fas fa-magic"></i> 快速预设
                        </label>
                        <select id="presetAlias">
                            <option value="custom">自定义设置</option>
                            <option value="mp4">MP4视频 (推荐)</option>
                            <option value="mp3">MP3音频</option>
                            <option value="mkv">MKV视频</option>
                            <option value="aac">AAC音频</option>
                        </select>
                        <small class="preset-hint">选择预设后将自动配置最佳参数</small>
                    </div>

                    <div class="option-group">
                        <label for="quality">
                            <i class="fas fa-video"></i> 视频质量
                        </label>
                        <select id="quality">
                            <option value="best">最佳质量 (推荐)</option>
                            <option value="2160p">4K (2160p)</option>
                            <option value="1440p">2K (1440p)</option>
                            <option value="1080p">1080p</option>
                            <option value="720p">720p</option>
                            <option value="480p">480p</option>
                            <option value="360p">360p</option>
                            <option value="worst">最低质量</option>
                        </select>
                    </div>

                    <div class="option-group">
                        <label for="audioFormat">
                            <i class="fas fa-music"></i> 音频格式
                        </label>
                        <select id="audioFormat">
                            <option value="mp3">MP3</option>
                            <option value="m4a">M4A</option>
                            <option value="wav">WAV</option>
                            <option value="flac">FLAC</option>
                        </select>
                    </div>

                    <div class="option-group">
                        <label for="saveAsDirectory">
                            <i class="fas fa-folder"></i> 是否保存为目录
                        </label>
                        <select id="saveAsDirectory">
                            <option value="false" selected>否 (直接保存到日期目录)</option>
                            <option value="true">是 (创建文件同名目录)</option>
                        </select>
                    </div>
                </div>

                <div class="checkbox-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="audioOnly">
                        <span class="checkmark"></span>
                        <i class="fas fa-headphones"></i> 仅下载音频
                    </label>

                    <label class="checkbox-label">
                        <input type="checkbox" id="playlist">
                        <span class="checkmark"></span>
                        <i class="fas fa-list"></i> 下载整个播放列表
                    </label>

                    <label class="checkbox-label">
                        <input type="checkbox" id="subtitles">
                        <span class="checkmark"></span>
                        <i class="fas fa-closed-captioning"></i> 下载字幕
                    </label>
                </div>

                <div class="subtitle-options" id="subtitleOptions" style="display: none;">
                    <label for="subtitleLang">
                        <i class="fas fa-language"></i> 字幕语言
                    </label>
                    <select id="subtitleLang">
                        <option value="en">English</option>
                        <option value="zh">中文</option>
                        <option value="zh-CN">简体中文</option>
                        <option value="zh-TW">繁体中文</option>
                        <option value="ja">日语</option>
                        <option value="ko">韩语</option>
                        <option value="es">西班牙语</option>
                        <option value="fr">法语</option>
                        <option value="de">德语</option>
                    </select>
                </div>

                <div class="button-group">
                    <!-- 单个下载按钮 -->
                    <div class="single-buttons" id="singleButtons" style="display: flex; gap: 1rem; align-items: center;">
                        <button id="getInfoBtn" class="btn btn-secondary">
                            <i class="fas fa-info-circle"></i> 获取信息
                        </button>
                        <button id="downloadBtn" class="btn btn-primary">
                            <i class="fas fa-download"></i> 开始下载
                        </button>
                    </div>

                    <!-- 批量下载按钮 -->
                    <div class="batch-buttons" id="batchButtons" style="display: none;">
                        <button id="batchInfoBtn" class="btn btn-secondary">
                            <i class="fas fa-info-circle"></i> 批量获取信息
                        </button>
                        <button id="batchDownloadBtn" class="btn btn-primary">
                            <i class="fas fa-download"></i> 开始批量下载
                        </button>
                        <button id="stopBatchBtn" class="btn btn-danger" style="display: none;">
                            <i class="fas fa-stop"></i> 停止批量下载
                        </button>
                    </div>

                    <!-- 搜索下载按钮 -->
                    <div class="search-buttons" id="searchButtons" style="display: none;">
                        <button id="downloadSelectedBtn" class="btn btn-primary" disabled>
                            <i class="fas fa-download"></i> 下载选中的视频
                        </button>
                        <button id="clearSearchBtn" class="btn btn-secondary">
                            <i class="fas fa-trash"></i> 清空搜索结果
                        </button>
                    </div>
                </div>
            </div>

            <div class="info-section" id="infoSection" style="display: none;">
                <h3><i class="fas fa-info-circle"></i> 视频信息</h3>
                <div id="videoInfo"></div>
            </div>

            <!-- 批量信息显示区域 -->
            <div class="batch-info-section" id="batchInfoSection" style="display: none;">
                <h3><i class="fas fa-info-circle"></i> 批量视频信息</h3>
                <div class="batch-summary">
                    <div class="summary-item">
                        <span class="summary-label">总数:</span>
                        <span id="batchTotal">0</span>
                    </div>
                    <div class="summary-item">
                        <span class="summary-label">有效:</span>
                        <span id="batchValid">0</span>
                    </div>
                    <div class="summary-item">
                        <span class="summary-label">无效:</span>
                        <span id="batchInvalid">0</span>
                    </div>
                </div>
                <div id="batchVideoInfo" class="batch-video-list"></div>
            </div>

            <div class="progress-section" id="progressSection" style="display: none;">
                <h3><i class="fas fa-download"></i> 下载进度</h3>
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text" id="progressText">准备下载...</div>
                <div class="log-container" id="logContainer"></div>
            </div>

            <!-- 批量下载进度区域 -->
            <div class="batch-progress-section" id="batchProgressSection" style="display: none;">
                <h3><i class="fas fa-download"></i> 批量下载进度</h3>
                
                <!-- 总体进度 -->
                <div class="overall-progress">
                    <div class="progress-header">
                        <span>总体进度</span>
                        <span id="overallProgressText">0/0</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="overallProgressFill"></div>
                    </div>
                </div>

                <!-- 当前下载项目 -->
                <div class="current-downloads" id="currentDownloads"></div>

                <!-- 下载队列 -->
                <div class="download-queue">
                    <h4><i class="fas fa-clock"></i> 下载队列</h4>
                    <div id="downloadQueue" class="queue-list"></div>
                </div>

                <!-- 批量下载日志 -->
                <div class="batch-log">
                    <h4><i class="fas fa-list-alt"></i> 批量下载日志</h4>
                    <div class="log-container" id="batchLogContainer" style="background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 4px; padding: 1rem; font-family: 'Courier New', monospace; font-size: 0.9rem; line-height: 1.4; overflow-y: auto;"></div>
                </div>
            </div>

            <!-- 视频处理区域 -->
            <div class="video-processing-section" id="videoProcessingSection" style="display: none;">
                <h3><i class="fas fa-magic"></i> 视频后处理</h3>
                
                <!-- 可用文件列表 -->
                <div class="processing-files">
                    <h4><i class="fas fa-video"></i> 可用视频文件</h4>
                    <button type="button" id="refreshProcessingFilesBtn" class="btn btn-small btn-secondary" style="margin-bottom: 1rem;">
                        <i class="fas fa-refresh"></i> 刷新文件列表
                    </button>
                    <div id="availableFiles" class="available-files">
                        <p class="no-files">正在加载文件列表...</p>
                    </div>
                </div>
                
                <!-- 操作配置 -->
                <div class="processing-operations">
                    <h4><i class="fas fa-cogs"></i> 选择处理操作</h4>
                    <p class="operation-hint">请先选择要执行的处理操作，然后配置参数</p>
                    
                    <!-- 添加操作按钮 -->
                    <div class="operation-buttons">
                        <button type="button" class="btn btn-small" data-operation="trim">
                            <i class="fas fa-cut"></i> 截取
                        </button>
                        <button type="button" class="btn btn-small" data-operation="scale">
                            <i class="fas fa-expand-arrows-alt"></i> 缩放
                        </button>
                        <button type="button" class="btn btn-small" data-operation="watermark">
                            <i class="fas fa-copyright"></i> 水印
                        </button>
                        <button type="button" class="btn btn-small" data-operation="mosaic">
                            <i class="fas fa-th"></i> 马赛克
                        </button>
                        <button type="button" class="btn btn-small" data-operation="merge">
                            <i class="fas fa-object-group"></i> 合并
                        </button>
                        <button type="button" class="btn btn-small" data-operation="background">
                            <i class="fas fa-image"></i> 添加背景图
                        </button>
                        <button type="button" class="btn btn-small" data-operation="backgroundVideo">
                            <i class="fas fa-film"></i> 添加背景视频
                        </button>
                        <button type="button" class="btn btn-small" data-operation="split">
                            <i class="fas fa-scissors"></i> 分割视频
                        </button>
                        <button type="button" class="btn btn-small" data-operation="mirror">
                            <i class="fas fa-mirror"></i> 镜像
                        </button>
                        <button type="button" class="btn btn-small" data-operation="rotate">
                            <i class="fas fa-redo"></i> 旋转
                        </button>
                        <button type="button" class="btn btn-small" data-operation="speed">
                            <i class="fas fa-tachometer-alt"></i> 变速
                        </button>
                        <button type="button" class="btn btn-small" data-operation="subtitle">
                            <i class="fas fa-closed-captioning"></i> 添加字幕
                        </button>
                    </div>

                    <!-- 操作工作流 -->
                    <div class="workflow-container">
                        <h5><i class="fas fa-project-diagram"></i> 处理工作流</h5>
                        <div id="operationWorkflow" class="operation-workflow">
                            <p class="no-operations">暂无操作，请点击上方按钮添加处理步骤</p>
                        </div>
                        
                        <!-- 处理模式选择 -->
                        <div class="processing-mode">
                            <label class="checkbox-label">
                                <input type="checkbox" id="serialProcessing" checked>
                                <span class="checkmark"></span>
                                <i class="fas fa-arrow-right"></i> 串行处理模式
                            </label>
                            <p class="mode-description">
                                <strong>串行模式：</strong>每个操作的输入是前一个操作的输出，适合连续处理同一视频<br>
                                <strong>并行模式：</strong>所有操作使用原始文件作为输入，适合对同一视频进行多种不同处理
                            </p>
                        </div>
                        
                        <div class="workflow-controls">
                            <button type="button" id="clearWorkflowBtn" class="btn btn-small btn-danger">
                                <i class="fas fa-trash"></i> 清空工作流
                            </button>
                            <button type="button" id="startProcessingBtn" class="btn btn-primary" disabled>
                                <i class="fas fa-play"></i> 开始处理
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 处理进度 -->
                <div class="processing-progress" id="processingProgress" style="display: none;">
                    <h4><i class="fas fa-spinner fa-spin"></i> 处理进度</h4>
                    <div class="progress-info">
                        <div class="progress-header">
                            <span id="processingStepText">准备处理...</span>
                            <span id="processingProgressText">0%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" id="processingProgressFill"></div>
                        </div>
                    </div>
                    <div class="processing-log">
                        <div class="log-header">
                            <h5><i class="fas fa-list-alt"></i> 处理日志</h5>
                            <button type="button" id="clearLogBtn" class="btn btn-small btn-secondary">
                                <i class="fas fa-eraser"></i> 清除日志
                            </button>
                        </div>
                        <div class="log-container" id="processingLogContainer"></div>
                    </div>
                </div>

                <!-- 处理结果 -->
                <div class="processing-results" id="processingResults" style="display: none;">
                    <h4><i class="fas fa-check-circle"></i> 处理完成</h4>
                    <div id="processingResultsList" class="results-list"></div>
                    <div class="result-actions">
                        <button type="button" id="downloadResultsBtn" class="btn btn-primary">
                            <i class="fas fa-download"></i> 下载处理结果
                        </button>
                        <button type="button" id="newProcessingBtn" class="btn btn-secondary">
                            <i class="fas fa-plus"></i> 新建处理任务
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文件管理区域 -->
            <div class="file-management-section" id="fileManagementSection" style="display: none;">
                <h3><i class="fas fa-folder-open"></i> 文件管理</h3>
                
                <!-- 文件管理模式选择 -->
                <div class="file-mode-selector">
                    <label class="mode-option">
                        <input type="radio" name="fileMode" value="downloads" checked>
                        <span class="mode-label">
                            <i class="fas fa-download"></i> 下载的文件
                        </span>
                    </label>
                    <label class="mode-option">
                        <input type="radio" name="fileMode" value="outputs">
                        <span class="mode-label">
                            <i class="fas fa-archive"></i> 产出物管理
                        </span>
                    </label>
                    <label class="mode-option">
                        <input type="radio" name="fileMode" value="backgrounds">
                        <span class="mode-label">
                            <i class="fas fa-image"></i> 背景图管理
                        </span>
                    </label>
                </div>

                <!-- 下载的文件区域 -->
                <div class="downloads-management" id="downloadsManagement">
                    <h4><i class="fas fa-folder"></i> 下载的文件</h4>
                    
                    <!-- 展示模式选择 -->
                    <div class="display-mode-selector" style="margin-bottom: 1rem;">
                        <label style="margin-right: 1rem;">
                            <input type="radio" name="displayMode" value="date" checked> 按日期分组
                        </label>
                        <label style="margin-right: 1rem;">
                            <input type="radio" name="displayMode" value="search"> 按搜索关键字分组
                        </label>
                        <label style="margin-right: 1rem;">
                            <input type="radio" name="displayMode" value="flat"> 平铺显示
                        </label>
                        <label>
                            <input type="radio" name="displayMode" value="table"> 表格显示
                        </label>
                    </div>
                    
                    <!-- 文件操作按钮 -->
                    <div class="file-operations" style="margin-bottom: 1rem;">
                        <button id="refreshBtn" class="btn btn-secondary">
                            <i class="fas fa-refresh"></i> 刷新列表
                        </button>
                        <button id="cleanupDownloadsBtn" class="btn btn-warning">
                            <i class="fas fa-broom"></i> 文件清理
                        </button>
                    </div>
                    
                    <div id="downloadsList" class="downloads-list">
                        <p class="no-downloads">暂无下载文件</p>
                    </div>
                </div>

                <!-- 产出物管理区域 -->
                <div class="outputs-management" id="outputsManagement" style="display: none;">
                    <h4><i class="fas fa-archive"></i> 产出物管理</h4>
                    <div class="output-controls">
                        <button type="button" id="refreshOutputsBtn" class="btn btn-small btn-secondary">
                            <i class="fas fa-refresh"></i> 刷新列表
                        </button>
                        <button type="button" id="cleanupOutputsBtn" class="btn btn-small btn-warning">
                            <i class="fas fa-broom"></i> 文件清理
                        </button>
                        <button type="button" id="clearOutputsBtn" class="btn btn-small btn-danger">
                            <i class="fas fa-trash"></i> 清空所有
                        </button>
                    </div>
                    <div id="outputsList" class="outputs-list">
                        <p class="no-outputs">暂无产出物</p>
                    </div>
                </div>

                <!-- 背景图管理区域 -->
                <div class="backgrounds-management" id="backgroundsManagement" style="display: none;">
                    <h4><i class="fas fa-image"></i> 背景图管理</h4>
                    <div class="background-controls">
                        <button type="button" id="refreshBackgroundsBtn" class="btn btn-small btn-secondary">
                            <i class="fas fa-refresh"></i> 刷新列表
                        </button>
                        <button type="button" id="clearAllBackgroundsBtn" class="btn btn-small btn-danger">
                            <i class="fas fa-trash-alt"></i> 删除所有背景图
                        </button>
                    </div>
                    <div class="background-stats" id="backgroundStats" style="margin-bottom: 1rem;">
                        <span class="stat-item">
                            <i class="fas fa-image"></i> 
                            背景图数量: <span id="backgroundCount">0</span>
                        </span>
                        <span class="stat-item">
                            <i class="fas fa-hdd"></i> 
                            总大小: <span id="backgroundTotalSize">0 MB</span>
                        </span>
                    </div>
                    <div id="backgroundsList" class="backgrounds-list">
                        <p class="no-backgrounds">暂无背景图文件</p>
                    </div>
                </div>
            </div>

            <div class="downloads-section" style="display: none;">
                <h3><i class="fas fa-folder"></i> 下载的文件</h3>
                
                <!-- 展示模式选择 -->
                <div class="display-mode-selector" style="margin-bottom: 1rem;">
                    <label style="margin-right: 1rem;">
                        <input type="radio" name="displayMode" value="date" checked> 按日期分组
                    </label>
                    <label style="margin-right: 1rem;">
                        <input type="radio" name="displayMode" value="search"> 按搜索关键字分组
                    </label>
                    <label style="margin-right: 1rem;">
                        <input type="radio" name="displayMode" value="flat"> 平铺显示
                    </label>
                    <label>
                        <input type="radio" name="displayMode" value="table"> 表格显示
                    </label>
                </div>
                
                <button id="refreshBtn" class="btn btn-secondary" style="margin-bottom: 1rem;">
                    <i class="fas fa-refresh"></i> 刷新列表
                </button>
                <div id="downloadsList" class="downloads-list">
                    <p class="no-downloads">暂无下载文件</p>
                </div>
            </div>
        </main>
    </div>

        <!-- 自定义确认对话框 -->
        <div class="modal-overlay" id="customConfirmModal" style="display: none;">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="confirmTitle">确认操作</h3>
                </div>
                <div class="modal-body">
                    <p id="confirmMessage">确定要执行此操作吗？</p>
                </div>
                <div class="modal-footer">
                    <button id="confirmCancelBtn" class="btn btn-secondary">取消</button>
                    <button id="confirmOkBtn" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>

        <!-- 文件选择模态框 -->
        <div class="modal-overlay" id="fileSelectModal" style="display: none;">
            <div class="modal-content file-select-modal">
                <div class="modal-header">
                    <h3 id="fileSelectTitle">选择文件</h3>
                    <button type="button" class="close-btn" onclick="closeFileSelectModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 搜索框 -->
                    <div class="file-search-container">
                        <div class="search-input-wrapper">
                            <i class="fas fa-search"></i>
                            <input type="text" id="fileSearchInput" placeholder="搜索文件名..." class="search-input">
                        </div>
                        <button type="button" id="fileSearchBtn" class="btn btn-small btn-secondary">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                    
                    <!-- 文件列表 -->
                    <div class="file-list-container">
                        <div id="fileSelectList" class="file-select-list">
                            <p class="no-files">暂无文件</p>
                        </div>
                    </div>
                    
                    <!-- 已选择的文件（仅合并操作显示） -->
                    <div class="merge-files-container" id="mergeFilesContainer" style="display: none;">
                        <div class="merge-files-header">
                            <h4><i class="fas fa-layer-group"></i> 已选择的文件（合并顺序）</h4>
                            <span class="file-count">共 <span id="mergeFileCount">0</span> 个文件</span>
                        </div>
                        <div id="selectedMergeFiles" class="selected-merge-files">
                            <div class="merge-files-placeholder">
                                请从上方列表中选择要合并的文件
                            </div>
                        </div>
                        <div class="merge-files-actions">
                            <button type="button" id="clearMergeFilesBtn" class="btn btn-small btn-secondary">
                                <i class="fas fa-trash"></i> 清空选择
                            </button>
                            <button type="button" id="sortMergeFilesBtn" class="btn btn-small btn-secondary">
                                <i class="fas fa-sort"></i> 按名称排序
                            </button>
                            <button type="button" id="reorderMergeFilesBtn" class="btn btn-small btn-secondary">
                                <i class="fas fa-arrows-alt-v"></i> 调整顺序
                            </button>
                        </div>
                    </div>
                    
                    <!-- 文件类型筛选 -->
                    <div class="file-filter-container">
                        <h5><i class="fas fa-filter"></i> 文件类型</h5>
                        <div class="filter-options">
                            <label class="filter-option">
                                <input type="checkbox" value="all" checked> 全部
                            </label>
                            <label class="filter-option">
                                <input type="checkbox" value="video"> 视频
                            </label>
                            <label class="filter-option">
                                <input type="checkbox" value="audio"> 音频
                            </label>
                            <label class="filter-option">
                                <input type="checkbox" value="image"> 图片
                            </label>
                        </div>
                    </div>
                    
                    <!-- 排序选项 -->
                    <div class="sort-options">
                        <label>排序方式：</label>
                        <select id="fileSortSelect" class="sort-select">
                            <option value="name">按名称</option>
                            <option value="date">按日期</option>
                            <option value="size">按大小</option>
                            <option value="type">按类型</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="fileSelectCancelBtn" class="btn btn-secondary">取消</button>
                    <button id="fileSelectConfirmBtn" class="btn btn-primary" disabled>确定</button>
                </div>
            </div>
        </div>

        <!-- 设置弹窗 -->
        <div class="modal-overlay" id="settingsModal" style="display: none;">
            <div class="modal-content settings-modal">
                <div class="modal-header">
                    <h3><i class="fas fa-cog"></i> 设置</h3>
                    <button type="button" class="close-btn" id="settingsCloseBtn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="settings-section">
                        <h4><i class="fas fa-server"></i> 服务器设置</h4>
                        <div class="setting-item">
                            <label for="serverPort">
                                <i class="fas fa-plug"></i> 服务端口
                            </label>
                            <input type="number" id="serverPort" min="1000" max="65535" value="3001" class="setting-input">
                            <div class="setting-description">
                                端口修改将在下次启动服务时生效
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="settingsCancelBtn" class="btn btn-secondary">取消</button>
                    <button id="settingsSaveBtn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>

        <!-- 文件清理弹窗 -->
        <div class="modal-overlay" id="cleanupModal" style="display: none;">
            <div class="modal-content cleanup-modal">
                <div class="modal-header">
                    <h3><i class="fas fa-broom"></i> 文件清理</h3>
                    <button type="button" class="close-btn" id="cleanupCloseBtn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="cleanup-section">
                        <h4 id="cleanupSectionTitle"><i class="fas fa-download"></i> 清理下载文件</h4>
                        <div class="cleanup-description">
                            删除指定日期之前的所有文件，包括相关的关联信息
                        </div>
                        
                        <div class="cleanup-options">
                            <div class="date-selector">
                                <label for="cleanupDate">
                                    <i class="fas fa-calendar"></i> 清理日期
                                </label>
                                <input type="date" id="cleanupDate" class="cleanup-input">
                                <div class="date-description">
                                    将删除此日期之前（不包含当天）的所有文件
                                </div>
                            </div>
                            
                            <div class="cleanup-preview" id="cleanupPreview" style="display: none;">
                                <h5><i class="fas fa-eye"></i> 预览将要删除的文件</h5>
                                <div class="preview-stats">
                                    <span class="stat-item">
                                        <i class="fas fa-file"></i> 
                                        文件数量: <span id="previewFileCount">0</span>
                                    </span>
                                    <span class="stat-item">
                                        <i class="fas fa-hdd"></i> 
                                        总大小: <span id="previewTotalSize">0 MB</span>
                                    </span>
                                </div>
                                <div class="preview-list" id="previewList">
                                    <!-- 预览文件列表 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cleanupPreviewBtn" class="btn btn-secondary">
                        <i class="fas fa-eye"></i> 预览
                    </button>
                    <button id="cleanupCancelBtn" class="btn btn-secondary">取消</button>
                    <button id="cleanupConfirmBtn" class="btn btn-danger" disabled>
                        <i class="fas fa-trash"></i> 确认删除
                    </button>
                </div>
            </div>
        </div>

        <!-- Toast 通知 -->
        <div id="toast" class="toast"></div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="script.js"></script>
</body>
</html>